<template>
  <div id="scharts" style="height: 30vh;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "roseEchart",
  data() {
    return {
      chart: null,
      options: {},
      barData: [],
      lineData: [],
      category: []
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.initOptions();
      this.initCharts();
    }, 1000);
  },
  methods: {
    initOptions() {
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(0,0,0,0.2)",
              width: 1,
              type: "solid"
            }
          }
        },
        legend: {
          data: ["种植", "养殖", "生产", "入岚", "批发", "农贸"]
        },
        singleAxis: {
          top: 50,
          bottom: 50,
          axisTick: {},
          axisLabel: {},
          type: "time",
          axisPointer: {
            animation: true,
            label: {
              show: true
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              opacity: 0.2
            }
          }
        },
        series: [
          {
            type: "themeRiver",
            emphasis: {
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0, 0, 0, 0.8)"
              }
            },
            data: [
              ["2015/11/08", 10, "种植"],
              ["2015/11/09", 15, "种植"],
              ["2015/11/10", 35, "种植"],
              ["2015/11/11", 38, "种植"],
              ["2015/11/12", 22, "种植"],
              ["2015/11/13", 16, "种植"],
              ["2015/11/14", 7, "种植"],
              ["2015/11/15", 2, "种植"],
              ["2015/11/16", 17, "种植"],
              ["2015/11/17", 33, "种植"],
              ["2015/11/18", 40, "种植"],
              ["2015/11/19", 32, "种植"],
              ["2015/11/20", 26, "种植"],
              ["2015/11/21", 35, "种植"],
              ["2015/11/22", 40, "种植"],
              ["2015/11/23", 32, "种植"],
              ["2015/11/24", 26, "种植"],
              ["2015/11/25", 22, "种植"],
              ["2015/11/26", 16, "种植"],
              ["2015/11/27", 22, "种植"],
              ["2015/11/28", 10, "种植"],
              ["2015/11/08", 35, "养殖"],
              ["2015/11/09", 36, "养殖"],
              ["2015/11/10", 37, "养殖"],
              ["2015/11/11", 22, "养殖"],
              ["2015/11/12", 24, "养殖"],
              ["2015/11/13", 26, "养殖"],
              ["2015/11/14", 34, "养殖"],
              ["2015/11/15", 21, "养殖"],
              ["2015/11/16", 18, "养殖"],
              ["2015/11/17", 45, "养殖"],
              ["2015/11/18", 32, "养殖"],
              ["2015/11/19", 35, "养殖"],
              ["2015/11/20", 30, "养殖"],
              ["2015/11/21", 28, "养殖"],
              ["2015/11/22", 27, "养殖"],
              ["2015/11/23", 26, "养殖"],
              ["2015/11/24", 15, "养殖"],
              ["2015/11/25", 30, "养殖"],
              ["2015/11/26", 35, "养殖"],
              ["2015/11/27", 42, "养殖"],
              ["2015/11/28", 42, "养殖"],
              ["2015/11/08", 21, "生产"],
              ["2015/11/09", 25, "生产"],
              ["2015/11/10", 27, "生产"],
              ["2015/11/11", 23, "生产"],
              ["2015/11/12", 24, "生产"],
              ["2015/11/13", 21, "生产"],
              ["2015/11/14", 35, "生产"],
              ["2015/11/15", 39, "生产"],
              ["2015/11/16", 40, "生产"],
              ["2015/11/17", 36, "生产"],
              ["2015/11/18", 33, "生产"],
              ["2015/11/19", 43, "生产"],
              ["2015/11/20", 40, "生产"],
              ["2015/11/21", 34, "生产"],
              ["2015/11/22", 28, "生产"],
              ["2015/11/23", 26, "生产"],
              ["2015/11/24", 37, "生产"],
              ["2015/11/25", 41, "生产"],
              ["2015/11/26", 46, "生产"],
              ["2015/11/27", 47, "生产"],
              ["2015/11/28", 41, "生产"],
              ["2015/11/08", 10, "入岚"],
              ["2015/11/09", 15, "入岚"],
              ["2015/11/10", 35, "入岚"],
              ["2015/11/11", 38, "入岚"],
              ["2015/11/12", 22, "入岚"],
              ["2015/11/13", 16, "入岚"],
              ["2015/11/14", 7, "入岚"],
              ["2015/11/15", 2, "入岚"],
              ["2015/11/16", 17, "入岚"],
              ["2015/11/17", 33, "入岚"],
              ["2015/11/18", 40, "入岚"],
              ["2015/11/19", 32, "入岚"],
              ["2015/11/20", 26, "入岚"],
              ["2015/11/21", 35, "入岚"],
              ["2015/11/22", 40, "入岚"],
              ["2015/11/23", 32, "入岚"],
              ["2015/11/24", 26, "入岚"],
              ["2015/11/25", 22, "入岚"],
              ["2015/11/26", 16, "入岚"],
              ["2015/11/27", 22, "入岚"],
              ["2015/11/28", 10, "入岚"],
              ["2015/11/08", 10, "批发"],
              ["2015/11/09", 15, "批发"],
              ["2015/11/10", 35, "批发"],
              ["2015/11/11", 38, "批发"],
              ["2015/11/12", 22, "批发"],
              ["2015/11/13", 16, "批发"],
              ["2015/11/14", 7, "批发"],
              ["2015/11/15", 2, "批发"],
              ["2015/11/16", 17, "批发"],
              ["2015/11/17", 33, "批发"],
              ["2015/11/18", 40, "批发"],
              ["2015/11/19", 32, "批发"],
              ["2015/11/20", 26, "批发"],
              ["2015/11/21", 35, "批发"],
              ["2015/11/22", 4, "批发"],
              ["2015/11/23", 32, "批发"],
              ["2015/11/24", 26, "批发"],
              ["2015/11/25", 22, "批发"],
              ["2015/11/26", 16, "批发"],
              ["2015/11/27", 22, "批发"],
              ["2015/11/28", 10, "批发"],
              ["2015/11/08", 10, "农贸"],
              ["2015/11/09", 15, "农贸"],
              ["2015/11/10", 35, "农贸"],
              ["2015/11/11", 38, "农贸"],
              ["2015/11/12", 22, "农贸"],
              ["2015/11/13", 16, "农贸"],
              ["2015/11/14", 7, "农贸"],
              ["2015/11/15", 2, "农贸"],
              ["2015/11/16", 17, "农贸"],
              ["2015/11/17", 33, "农贸"],
              ["2015/11/18", 4, "农贸"],
              ["2015/11/19", 32, "农贸"],
              ["2015/11/20", 26, "农贸"],
              ["2015/11/21", 35, "农贸"],
              ["2015/11/22", 40, "农贸"],
              ["2015/11/23", 32, "农贸"],
              ["2015/11/24", 26, "农贸"],
              ["2015/11/25", 22, "农贸"],
              ["2015/11/26", 16, "农贸"],
              ["2015/11/27", 22, "农贸"],
              ["2015/11/28", 10, "农贸"]
            ]
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("scharts"));
      this.chart.setOption(this.options);
    }
  }
};
</script>
